<template>
  <div>
    <el-table :data="list" style="width: 100%">
      <!-- <el-table-column type="index"></el-table-column> -->
      <el-table-column type="index" label="序号" width="180"></el-table-column>
      <el-table-column prop="order_number" label width="180"></el-table-column>
      <el-table-column prop="order_price" label="订单价格" width="180"></el-table-column>
      <el-table-column label="付款方式" width="180">
        <template #default="xxx">
          <el-tag align="center" type="success" v-if="xxx.row.order_pay
 == '0'">
            {{xxx.row.order_pay
            |transform}}
          </el-tag>
          <el-tag align="center" type="error" v-if="xxx.row.order_pay
 == '1'">
            {{xxx.row.order_pay
            |transform}}
          </el-tag>
          <el-tag align="center" type="warning" v-if="xxx.row.order_pay
 == '2'">
            {{xxx.row.order_pay
            |transform}}
          </el-tag>
          <el-tag align="center" type="info" v-if="xxx.row.order_pay
 == '3'">
            {{xxx.row.order_pay
            |transform}}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="is_send" label="是否发货"></el-table-column>
      <el-table-column prop="create_time" label="订单更新时间"></el-table-column>
      <!-- <el-table-column label="操作" width="180"></el-table-column> -->
      <el-table-column label="操作">
        <i class="el-icon-edit"></i>
        <el-tag>编辑</el-tag>
      </el-table-column>
    </el-table>
    <div class="block">
      <!-- 分页 -->
      <el-pagination
        class="right"
        background
        :current-page.sync="page"
        :page-size="pageSize"
        layout="prev, pager, next"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import { getProductionLista } from "@/api/production.js";

export default {
  data() {
    return {
      list: [],
      total: 0,
      pageSize: 10,
      page: 1
      // pagenums: 1,
      // pagesizes: 10,
    };
  },
  methods: {
    requestList() {
      getProductionLista({
        pagenum: this.page,
        pagesize: this.pageSize
      }).then(res => {
        console.log(res);
        // console.log(this.page)
        if (res.data.meta.status === 200) {
          // 请求回来更新数据
          this.list = res.data.data.goods;
          //   // // 更新总数
          this.total = res.data.data.total;
        }
      });
    }
  },
  mounted() {
    this.requestList();
  },
  watch: {
    page: "requestList"
  },
  filters: {
    transform: function(value) {
      if (value === "0") {
        return (value = "未支付");
      }
      if (value === "1") {
        return (value = "支付宝");
      }
      if (value === "2") {
        return (value = "微信");
      }
      if (value === "3") {
        return (value = "银行卡");
      }
    }
  }
};
</script>

<style scoped lang='scss'>
.right {
  text-align: center;
}
.el-icon-edit {
  width: 20px;
}
.el-table {
  width: 95%;
  margin-top: 20px;
  margin-bottom: 15px;

  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}
</style>